
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #F0F0F0;
}
/* 无序列表样式 */
ul li {
   display: inline;
   }
  ul li a{
    color: #555;

   }
  ul li a:hover{
     color: red;
   }

   /* 有序列表 */
   ol li{
     color: #555;
     font-size: 40px;
   }
   ol li audio{
     float: right;
     height: 40px;
   }

 
/*头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
  background-image: url(../img/banner.jpg);
}
 
.header h1 {
  font-size: 50px;;
  color: #F0FFFF;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color:#000000;
  text-align: center;
  font-family: "新宋体";
  font-size: 30px;
  padding: 10px 10px;
}
 
/* 导航条链接 */
.topnav a {
  display: inline;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* Left column */
.leftcolumn {   
  float: left;
  width: 25%;
  background-color:lightblue;
  border-radius: 1.25rem;
  margin-top: 120px;
  margin-left: 1%;
  box-shadow: 10px 10px 5px #AAAAAA;
  
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 70%;
  background-color:#F0FFFF;
  border-radius: 1.25rem;
  padding-left: 20px;
  padding-bottom: 20px;
  margin-top: 20px;
  margin-left: 3%;
  margin-right: 1%;
  box-shadow: 10px 10px 5px #AAAAAA;
}

.rightcolumn2 {
  float: left;
  margin-left: 3%;
  margin-top: 20px;
  width: 70%;
  background-color:#555;
  padding: 20px 20px;
}
/* 中间栏 */
.centercolumn{
	
  background-color:#F0FFFF;
	border-radius: 1.25rem;
	padding: 20px 20px;
	margin-top: 20px;
	margin-left: 1%;
	margin-right: 1%;
	box-shadow: 10px 10px 5px #AAAAAA;
}
.centercolumn a{
  font-weight: bold;
}
 
/* 卡片效果 */
#card {
  background-color: #F0FFFF;
  float: left;
  width: 35%;
  margin-left: 3%;
  margin-top: 20px;
  padding-bottom: 25px;
  border-radius: 1.25rem;
  box-shadow: 10px 10px 5px #AAAAAA;
}

#card2 {
  background-color:#F0FFFF;
  border-radius: 1.25rem;
  float: left;
  width: 34%;
  margin-left: 1%;
  padding: 10px 20px 15px;
  box-shadow: 10px 10px 5px #AAAAAA;

  margin-top: 20px;
}
#card3{
  background-color:#F0FFFF;
  border-radius: 1.25rem;
  float: left;
  width: 35%;
  margin-top: 1%;
  margin-left: 1%;
  padding: 10px 20px 15px;
  box-shadow: 10px 10px 5px #AAAAAA;
}

#card4{
  background-color:#F0FFFF;
  border-radius: 1.25rem;
  float: left;
  width: 62%;
  margin-top: 1%;
  margin-left: 1%;
  padding: 10px 20px 15px;
  box-shadow: 10px 10px 5px #AAAAAA;
}
 /* 标题 */
#title{
text-decoration: none;
color:#555;
}
#title:hover{
  color: red;
}
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #DDDDDD;
  margin: 20px;
  }
  
  .container {
  margin: auto;
	width: 400px;
	height: 300px;
  overflow: hidden; 
}
 
.photo {
	width: 1200px;
	animation: switch 5s ease-out infinite;
}
 
.photo > img {
	float: left;
	width: 400px;
	height: 300px;
} 

@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -400px;
	}
	70%, 100% {
		margin-left: -800px;
	}
}
 
/*屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn, #card, #card2,#card3,#card4 {   
    width: 100%;
    padding: 20px;
	margin-left: 0;
	margin-top: 20px;
  }
}
 
.photoa{
  background:#F0FFFF;
  float: left;
  width: 30%;
  margin: 20px;
  border: 8px solid cyan ;
  border-radius: 20px 50px;
  box-shadow: #555 5px 5px;
}
.photoa img{
  display:block;
  margin: auto;
  width: 100%;
  border-radius: 20px 50px;

}

.photob{
  background:#F0FFFF;
  float: left;
  width: 30%;
  margin: 20px;
  border: 8px solid cyan;
  border-radius: 20px;
  box-shadow: #555 5px 5px;
}
.photob img{
  display:block;
  margin: auto;
  width: 100%;
  border-radius: 20px;
}

.photoc{
  background:#F0FFFF;
  float: left;
  width: 30%;
  margin: 20px;
 border: 8px solid cyan;

  border-radius: 50%;
  box-shadow: #555 5px 5px;
}
.photoc img{
  display:block;
  margin: auto;
  width: 100%;
  border-radius: 50%;
}
